import Vue from 'vue'
// 1.1导入路由的包
import VueRouter from 'vue-router'
// 1.2安装路由
Vue.use(VueRouter)

// 定义全局的过滤器
import moment from 'moment'
Vue.filter('dateFormat', function(dateStr, pattern="YYYY-MM-DD HH:mm:ss"){
	return moment(dateStr).format(pattern)
})

// 1.3导入自己的router.js路由模块
import router from './router.js'

// 2.1 导入vue-resource
import VueResource from 'vue-resource'
// 2.2 安装
Vue.use(VueResource)
// 设置请求的根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005'
// 全局设置POST时候表单数据格式组织形式 默认application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true

import app from './App.vue'   


// 按需导入Mint-UI组件
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe)
// Vue.component(SwipeItem.name, SwipeItem)
// Vue.component(Button.name, Button)
// Vue.use(Lazyload)
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

// 安装图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

// 配置vuex的步骤
// 1. 运行npm i Vuex -S
// 2. 导入包
import Vuex from 'vuex'
// 3. 注册包到vue
Vue.use(Vuex)
// 4. new Vuex.Store()实例，得到一个数据仓库对象

// 每次刚进入网站，会调用main.js，先从本地存储中，把购物车的数据读出来
var cart = JSON.parse(localStorage.getItem('cart') || '[]')
console.log(JSON.parse('[]'))

var store = new Vuex.Store({
	state: {
		// 可以想象成组件中的data，用来存储数据
		// 如果在组件中访问state中的数据，this.$store.state.count
		count: 0,
		cart: cart   // 将购物车中的商品的数据，用一个数组存储起来   {id: xxx, count: xxxx, price: xxxx, selected: boolean}
	},
	mutations: {
		// 如果要操作store中的state值，只能通过调用mutations提供的方法才能操作对应的数据
		// 不推荐直接操作state中的数据，如果导致数据的紊乱，不能快速定位到错误的原因
		// 因为每个组件都有操作数据的权限
		increment(state){
			state.count++
		},
		// 子组件调用mutations的方法，this.$store.commit('increment')
		// 类似this.$emit('父组件中的方法名')
		addToCart(state, goodsinfo){
			// 点击加入购物车，把商品信息保存到store中的cart上
			// 1. 如果购物车中，之前就有这个对应的商品，那么只需要更新购买数量

			// 2. 如果没有，直接把商品数据push到cart中
			// 假设在购物车中没有找到对应的商品，标识符flag
			var flag = false;
			state.cart.some(item => {
				if(item.id === goodsinfo.id) {
					item.count += parseInt(goodsinfo.count);
					flag = true;
					return true;
				}
			})
			if(!flag) {
				state.cart.push(goodsinfo)
			}
			// console.log(state.cart)
			// 当更新cart数组之后，存储到本地的localStorage中
			localStorage.setItem('cart', JSON.stringify(state.cart));
		},
		updateGoodsCount(state, goodsinfo){
			// 修改购物车中商品的数量值
			state.cart.some(item => {
				if(item.id == goodsinfo.id) {
					item.count = parseInt(goodsinfo.count)
					return true
				}
			})
			console.log(typeof(goodsinfo.id), typeof(this.state.cart[0].id))
			localStorage.setItem('cart', JSON.stringify(state.cart));
		},
		removeFromCart(state, id){
			// 根据id 从store中的购物车中删除对应的那条商品数据
			state.cart.some((item, i) => {
				if(item.id == id) {
					state.cart.splice(i, 1)
					return true
				}
			})
			localStorage.setItem('cart', JSON.stringify(state.cart));
		},
		updateGoodsSelected(state, info){
			state.cart.some(item => {
				if(item.id == info.id) {
					item.selected = info.selected
					return true;
				}
			})
			localStorage.setItem('cart', JSON.stringify(state.cart));
		}
	},
	getters:{
		// 不能修改数据，只负责对外提供数据，修改数据通过mutations中的方法
		optCount: function(state){
			return '当前最新的count值是：' + state.count
		},
		getAllCount(state){
			var c = 0;
			state.cart.forEach(item => {
				c += item.count
			})
			return c;
		},
		// getters中的方法类似组件中的过滤器，因为都不修改原数据
		// getters和computed计算属性类似，state中的数据发生变化，就会立即触发getters中引用了这个数据的方法
		getGoodsCount(state){
			var o = {}
			state.cart.forEach(item => {
				o[item.id] = item.count;
			})
			return o
		},
		getGoodsSelected(state){
			var o = {}
			state.cart.forEach(item => {
				o[item.id] = item.selected
			})
			return o
		},
		getGoodsCountAndPrice(state){
			var o = {
				count: 0,
				total_price: 0
			}
			state.cart.forEach(item => {
				if(item.selected){
					o.count += item.count
					o.total_price += item.price * item.count
				}
			})
			return o
		}
	}
})


// 导入MUI样式
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'

var vm = new Vue({
	el: '#app',
	render: c => c(app),
	router,
	store: store  // 5.将vuex创建的store挂载到VM实例上  store
	// 只要挂载到了vm上，任何组件都能使用store来存取数据
})